/* global AFRAME, THREE */
AFRAME.registerComponent('balloon-handler', {
    schema: {
        balloonHandlerTemplate: { default: '#balloon-handler-template' },
      triggerKeyCode: { default: 'B' },
      startAngel: { type: 'number', default: 0 },
      endAngel: { type: 'number', default: 360 },
      minRadius: { type: 'number', default: 20 },
      maxRadius: { type: 'number', default: 25 },
      // x,z坐标和中间的标语适配
      centerPoint: {
        type: "vec3", default: {
          // x: 3.91995, y: 1.6, z: 10.11278
          // x: 0, y: 1.6, z: 0
          x: 0, y: 6, z: 0
        }
      }
    },
  
    init: function () {
      const self = this;
      const el = self.el;
      const sceneEl = el.sceneEl;
      const data = self.data;
  
      const countCtl = { startCount: 0, endCount: 3 };
      const timeCtl = { minTime: 1500, maxTime: 2000 };
      const sizeCtl = { minSize: 2, maxSize: 5 };
      const centerPoint = data.centerPoint,
        startAngel = data.startAngel,
        endAngel = data.endAngel,
        minRadius = data.minRadius,
        maxRadius = data.maxRadius;
  
  
      document.addEventListener('keyup', function (e) {
        if (e.key == data.triggerKeyCode) {
          console.log('ballonGenerationController');
          self.ballonGenerationController(countCtl, timeCtl, sizeCtl);
        }
      })
  
      // 需要Battle信号以生成气球
      // 每隔1秒，决定下次一定时间范围内生成气球
      // 传入值分别为气球总数范围startCount和endCount，随机生成时间范围minTime和MaxTime
      self.ballonGenerationController = function (countCtl, timeCtl, sizeCtl) {
        let increaseNumber = function () {
          const color = getRandomColor();
          const radius = getRandomArbitrary(sizeCtl.minSize, sizeCtl.maxSize);
          const ballon = self.setBalloon(color, radius);
          addElementToScene(sceneEl, ballon);
          console.log('ballon', ballon);
          countCtl.startCount++;
          // 一定范围内的随机时间生成气球
          const randomTime = getRandomArbitrary(timeCtl.minTime, timeCtl.maxTime);
          if (countCtl.startCount < countCtl.endCount) {
            setTimeout(increaseNumber, randomTime);
          } else {
            console.log('Done');
          }
        }
        setTimeout(increaseNumber, 1000);
      },
  
        self.setBalloon = function (color = "#FF0000", radius = 2) {
          const el = document.createElement('a-entity');
          el.setAttribute('networked', 'template:' + data.balloonHandlerTemplate);
          console.log('el before ',el);
          console.log('el before  material',el.getAttribute('material'));
          console.log('el before  color',el.getAttribute('color'));
          el.setAttribute('material', 'color', 'green');
          console.log('el after ',el);
          console.log('el after  material',el.getAttribute('material'));
          console.log('el after  color',el.getAttribute('color'));
  
          el.setAttribute('position', getRandomPosition_circle(centerPoint, startAngel, endAngel, minRadius, maxRadius));
  
          return el;
        }
  
    },
  });
  